{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  if custom_variant != blank
    assign target = custom_variant
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign available = target.available | default: false
  assign money_price = price | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div class="price
  {%- if price_class %} {{ price_class }}{% endif -%}
  {%- if available == false %} price--sold-out {% endif -%}
  {%- if compare_at_price > price %} price--on-sale {% endif -%}
  {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}">
  <dl>
    <div class="price__regular">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
      </dt>
      <dd {% if show_badges == false %}class="price__last"{% endif %}>
        <span class="price-item price-item--regular h5 text-black">
          {{ money_price }}
        </span>
      </dd>
      {%- render 'tax-inclusive' target: target, tax_class: 'flex-center ms-2' -%}
    </div>

    <div class="price__sale {{ flex_parameters }}">
      {% comment %}
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      </dt>
      {% endcomment %}
      <dd {% if show_badges == false %}class="price__last {{ price_last_font }}"{% endif %}>
        <span class="price-item price-item--sale h5 text-black">
          {{ money_price }}
        </span>
      </dd>
      {% comment %}
      <dt class="price__compare">
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
      </dt>
      {% endcomment %}
      <dd class="price__compare {{ price_compare_font }}">
        <s class="price-item price-item--regular h5 fw-normal">
          {% if settings.currency_code_enabled %}
            {{ compare_at_price | money_with_currency }}
          {% else %}
            {{ compare_at_price | money }}
          {% endif %}
        </s>
      </dd>
      {%- render 'tax-inclusive' target: target, tax_class: 'flex-center mx-1' -%}

      {% if compare_at_price > price %}
        {% assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price %}
        {% assign badge_bg_color =  ''%}
        {% assign badge_tx_color =  ''%}
        {% if template.name == 'product' and template.suffix == 'kik-max-2' %}
          {% if section.settings.product_badge_bg_color != blank %}
            {% assign badge_bg_color = section.settings.product_badge_bg_color %}
          {% else %}
            {% assign badge_bg_color = "#007AFF" %}
          {% endif %}          
          {% if section.settings.product_badge_tx_color != blank %}
            {% assign badge_tx_color = section.settings.product_badge_tx_color %}
          {% else %}
            {% assign badge_tx_color = "#fff" %}
          {% endif %}
        {% else %}
          {% assign badge_bg_color =  '#007AFF'%}
          {% assign badge_tx_color =  '#fff'%}
        {% endif %}

     {%comment%}
        <div class="badge price__badge-sale {{template.suffix}}" style="background:{{ badge_bg_color }};color:{{badge_tx_color}};">
          SAVE {{ discount | round }}%g
        </div>
        {%endcomment%}


         {% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.compare_at_price > current_variant.price %}
  {% assign amount_saved = current_variant.compare_at_price | minus: current_variant.price %}
  <div class="badge price__badge-sale {{ template.suffix }}" style="background:{{ badge_bg_color }}; color:{{ badge_tx_color }};">
    SAVE  {{ amount_saved | money_without_trailing_zeros }}
  </div>
{% endif %}

    {% if template.suffix == 'kik-max-2' %}
       <div class="ok-rat">
  <div data-oke-reviews-version="0.77.4" data-oke-container="" class="okeReviews oke-sr"><div class=""><div class="oke-sr-rating"> 3.5 </div><div class="oke-sr-stars"><div class="oke-stars"><!----><div class="oke-stars-background"><svg height="18" viewBox="0 0 79.22222222222221 14" aria-hidden="true" role="none"><use x="0" href="#oke-star-empty"></use><use x="16.155555555555555" href="#oke-star-empty"></use><use x="32.31111111111111" href="#oke-star-empty"></use><use x="48.46666666666667" href="#oke-star-empty"></use><use x="64.62222222222222" href="#oke-star-empty"></use></svg></div><div class="oke-stars-foreground" style="width: 70.3927%;"><svg height="18" viewBox="0 0 79.22222222222221 14" aria-hidden="true" role="none"><use x="0" href="#oke-star-filled"></use><use x="16.155555555555555" href="#oke-star-filled"></use><use x="32.31111111111111" href="#oke-star-filled"></use><use x="48.46666666666667" href="#oke-star-filled"></use><use x="64.62222222222222" href="#oke-star-filled"></use></svg></div><span class="oke-a11yText">Rated 3.5 out of 5 stars</span></div></div><div class="oke-sr-count"><span class="oke-sr-count-number">4</span><span class="oke-sr-label-text"> Reviews</span><!----></div><!----></div><script type="application/json" data-oke-metafield-data=""> {"averageRating":"3.5","reviewCount":4} </script></div>
</div>
    {% endif %}

      {% endif %}
    </div>
    {% if template.name == 'product' and template.suffix == 'kik-max-2' %}
      {% assign show_star = 'not_showing' %}
      {% for block in section.blocks %}
        {% if block.type == 'price' %}
          {% if block.settings.show_star %}
            {% assign show_star = 'showing_star' %}
          {% endif %}
        {% endif %}
      {% endfor %}
      {% if show_star == 'showing_star' %}
        {% for block in section.blocks %}
          {% if block.type == '@app' %}
            <div class="atar_app_side">
              {% render block %}
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endif %}
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} d-none{% endif %}">
      <dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt>
      <dd {% if show_badges == false %}class="price__last"{% endif %}>
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </dd>
    </small>
  </dl>

  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
  
</div>

